<template>
  <dv-border-box1>
    <div class="title">宣传视频</div>
    <div class="video-box">
      <el-carousel :autoplay="false" height="100" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item" style="height: 210px;">
          <div class="video-inner">
            <!-- <video ref="videoPlayer" loop id="videoPlayer" autoplay muted>
              <source src="../../../assets/h_video.mp4" />
            </video> -->
          </div>

        </el-carousel-item>
      </el-carousel>
    </div>
  </dv-border-box1>
</template>

<script lang='ts' setup>

</script>

<style lang='scss' scoped>
.dv-border-box-1 {
    height: 250px;
    overflow: hidden;
    .title {
        color: #edf4ff;
    }
}
.video-box {
    height: 100%;
    .el-carousel__container {
        width: 98%;
        height: 100% !important;
    }
    .video-inner {
        width: 100%;
        height: 230px;
        .video {
            width: 100%;
            height: 100%;
        }
    }
}
#videoPlayer {
    width: 95%;
    height: 100%;
    object-fit: cover;
}
</style>